<template>
	<view class="content">
		<view class="head-bg"></view>
		<view class="c-card-box">
			<view class="card-box">
				<view class="card-tit">{{ info.act_name }}</view>
				<view class="zxrx-box">
					<image src="../../static/rexian.png"></image>
					<view class="zxrx-tit">咨询热线：{{ info.link_mobile }}</view>
				</view>
				<view class="zxrx-box">
					<image src="../../static/youx.png"></image>
					<view class="zxrx-tit">邮箱：{{ info.link_email }}</view>
				</view>
				<view class="zxrx-box">
					<image src="../../static/jbsj.png"></image>
					<view class="zxrx-tit">举办时间：{{ info.hold_start_time }}</view>
				</view>
				<view class="zxrx-box">
					<image src="../../static/bmsj.png"></image>
					<view class="zxrx-tit">报名时间：{{ info.hold_end_time }}</view>
				</view>
				<view class="zxrx-box">
					<image src="../../static/zbdw.png"></image>
					<view class="zxrx-tit">举办单位：{{ info.host_unit }}</view>
				</view>
				<view class="zxrx-box">
					<image src="../../static/didian.png"></image>
					<view class="zxrx-tit">地点：{{ info.address }}</view>
				</view>
			</view>
		</view>
		<view class="mid-btn">
			<view :class="navIndex == 0?'mid-btn-left' : 'mid-btn-right'" @click="navClick(0)">
				参会企业
			</view>
			<view :class="navIndex == 1?'mid-btn-left' : 'mid-btn-right'" @click="navClick(1)">
				求职者
			</view>
		</view>
		<view class="swiper-box" v-if="navIndex==0">
			<view class="mid-tit">参会企业（{{ info.ac_company_join}}家）</view>
			<view class="item-box-head">
				<view class="zuixin-box">
					<view class="zx-tit">最新</view>
					<view class="bot-line"></view>
				</view>
				<view class="hy-box">
					<view class="hy-tit">行业(X)</view>
					<image src="../../static/hy-right.png"></image>
				</view>
			</view>
			<view class="mid-line"></view>
			<view class="i-item-box">
				<view class="item-box" v-for="item,i in list" :key="i">
					<view class="">
						<image :src="item.company_info.logo" mode=""></image>
					</view>
					<view class="item-box-center" @click="checkGs(item.company_info.id)">
						<view class="right-cont">
							<view class="name-tit">{{ item.company_info.company_name }}</view>
							<view class="zhiwei-tit">{{ item.company_info.link_position }}</view>
							<view class="zaizhao-tit">共2个在招职位</view>
						</view>
						<view class="left-btn">企业详情</view>
					</view>
				</view>
			</view>
		</view>
		<view class="swiper-box" v-if="navIndex==1">
			<view class="mid-tit">已预约求职者（{{ info.ac_user_join}}人）</view>
			<view class="item-box-head">
				<view class="zuixin-box">
					<view class="zx-tit">最新</view>
					<view class="bot-line"></view>
				</view>
				<view class="right-box">
					<view class="hy-box">
						<view class="hy-tit">学院(X)</view>
						<image src="../../static/hy-right.png"></image>
					</view>
					<view class="hy-box">
						<view class="hy-tit">专业(X)</view>
						<image src="../../static/hy-right.png"></image>
					</view>
					<view class="hy-box">
						<view class="hy-tit">性别(X)</view>
						<image src="../../static/hy-right.png"></image>
					</view>
				</view>
			</view>
			<view class="mid-line"></view>
			<view class="i-box-1">
				<view class="item-box-1" v-for="item,i in join" :key="i">
					<view class="item-box-center-1" @click="navJianli(item.id)">
						<view class="name-tit-1">{{ item.user_info.name}}</view>
						<view class="zhiwei-tit-1">{{ item.exp_job}}</view>
						<view class="zhiwei-tit-1">产品经理</view>
					</view>
					<view class="left-btn-1" @click="datingYaoYue(item.activity_id)">邀约</view>
				</view>
			</view>
		</view>
		<view class="foot-btn">
			<view class="foot-line"></view>
			<view class="btn-box">
				<view class="foot-btn-left" @click="qyBaom()">企业报名</view>
				<view class="foot-btn-right" @click="qzzBaom()">求职者报名</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				list:[],
				info:[],
				join:[],
				navIndex:0,
			}
		},
		onLoad(e) {
			this.id=e.id
			this.getData()
			this.getCompany()
			this.getJoin()
		},
		methods: {
			navClick(i){
				this.navIndex = i
				this.getData()
				this.getCompany()
				this.getJoin()
			},
			async getData() {
				const res = await this.get('/Index/Index/get_activity_info_by_id', {'id':this.id});
				if(res.code == 200){
					this.info = res.data
				}
			},
			async getCompany() {
				const res = await this.get('/Index/Index/get_company_list_by_activity_id', {'id':this.id});
				if(res.code == 200){
					this.list = res.data
				}
			},
			async getJoin() {
				const res = await this.get('/Index/Index/get_join_user_by_activity_id', {'id':this.id});
				if(res.code == 200){
					this.join = res.data
				}
			},
			async qyBaom(){
				const res = await this.get('/Index/UserCompany/add_join_activity_log', {'activity_id':this.id});
				if(res.code == 200){
					uni.showToast({
						title:'企业报名成功',
						duration:1500,
						icon:'none'
					})
				}
			},
			async qzzBaom(){
				const res = await this.get('/Index/User/add_join_activity', {'activity_id':this.id});
				if(res.code == 200){
					uni.showToast({
						title:'求职者报名成功',
						duration:1500,
						icon:'none'
					})
				}
			},
			datingYaoYue(id){
				uni.navigateTo({
					url:'school_recruit_yaoyue?user_id='+id
				})
			},
			checkGs(id){
				uni.navigateTo({
					url:'../my/enterprise/companyDetails?id='+id+'&identity=0'
				})
			},
			navJianli(id){
				uni.navigateTo({
					url:'./get_talent_item?id='+id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-bottom: 1upx;
		.head-bg{
			height: 256upx;
			background: #3291F8;
			border-radius: 0 0 80upx 80upx;
			position: relative;
		}
		.c-card-box{
			padding: 0 30upx;
			position: relative;
			top: -200upx;
			.card-box{
				width: 100%;
				background: #FFFFFF;
				border-radius: 10upx;
				padding: 30upx 30upx 14upx 30upx;
				box-shadow: 0 4upx 10upx 2upx rgba(0, 0, 0, 0.3);
				.card-tit{
					color: #101010;
					font-size: 28upx;
					margin-bottom: 34upx;
				}
				.zxrx-box{
					display: flex;
					align-items: center;
					margin-bottom: 16upx;
					image{
						width: 24upx;
						height: 24upx;
						margin-right: 10upx;
					}
					.zxrx-tit{
						font-size: 24upx;
						color: #8CA2AA;
					}
				}
			}
		}
		.mid-btn{
			width: 750upx;
			height: 70upx;
			display: flex;
			padding: 0 30upx;
			border-radius: 10upx;
			position: relative;
			top: -140upx;
			.mid-btn-left{
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
				background: #3291F8;
			}
			.mid-btn-right{
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #3291F8;
				background: #FFFFFF;
				border: 1upx solid #3291F8;
			}
		}
		.mid-tit{
			color: #101010;
			display: flex;
			justify-content: center;
			margin: 40upx 0 52upx 0;
			position: relative;
			top: -140upx;
		}
		.item-box-head{
			display: flex;
			justify-content: space-between;
			position: relative;
			top: -140upx;
			.zuixin-box{
				.zx-tit{
					font-weight: bold;
					margin: 0 0 8upx 38upx;
				}
				.bot-line{
					width: 40upx;
					margin-left: 45upx;
					border-bottom: 6upx solid #3291F8;
				}
			}
			.hy-box{
				display: flex;
				align-items: center;
				.hy-tit{
					color: #7B7B7B;
					margin-bottom: 16upx;
				}
				image{
					width: 28upx;
					height: 28upx;
					margin: 0 26upx 16upx 8upx;
				}
			}
			.right-box{
				display: flex;
				margin-right: 26upx;
				.hy-box{
					display: flex;
					align-items: center;
					.hy-tit{
						color: #7B7B7B;
						margin: 0 0 16upx 34upx;
					}
					image{
						width: 28upx;
						height: 28upx;
						margin: 0 0 16upx 6upx;
					}
				}
			}
		}
		.mid-line{
			height: 20upx;
			background: #F6F6F6;
			position: relative;
			top: -140upx;
		}
		.i-item-box{
			padding: 0 28upx;
			.item-box{
				display: flex;
				align-items: center;
				width: 100%;
				height: 222upx;
				margin: 30upx 0;
				padding-left: 30upx;
				border-radius: 10upx;
				box-shadow: 0 2upx 8upx 2upx rgba(0, 0, 0, 0.2);
				position: relative;
				top: -140upx;
				image{
					width: 116upx;
					height: 112upx;
				}
				.item-box-center{
					width: 100%;
					padding: 0 30upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.right-cont{
						.name-tit{
							color: #101010;
							font-size: 32upx;
						}
						.zhiwei-tit{
							color: #A7A7A7;
							margin: 16upx 0;
						}
						.zaizhao-tit{
							color: #3291F8;
						}
					}
					.left-btn{
						color: #3291F8;
						font-size: 28upx;
						text-align: center;
						padding: 4upx 20upx;
						border-radius: 30upx;
						border: 2upx solid #3291F8;
					}
				}
			}
		}
		.i-box-1{
			padding: 28upx;
			.item-box-1{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 24upx 0;
				padding: 30upx 0;
				border-radius: 10upx;
				box-shadow: 0 2upx 8upx 2upx rgba(0, 0, 0, 0.2);
				position: relative;
				top: -140upx;
				.item-box-center-1{
					width: 80%;
					.name-tit-1{
						color: #101010;
						font-size: 32upx;
						margin: 0 0 10upx 46upx;
					}
					.zhiwei-tit-1{
						color: #27B148;
						margin-left: 46upx;
					}
				}
				.left-btn-1{
					color: #3291F8;
					font-size: 28upx;
					padding: 2upx 20upx;
					margin-right: 22upx;
					border-radius: 30upx;
					border: 2upx solid #3291F8;
				}
			}
		}
		.foot-btn{
			position: fixed;
			left: 0;
			bottom: 0;
			height: 140upx;
			background: #FFFFFF;
			.foot-line{
				width: 749upx;
				margin-bottom: 24upx;
				border: 2upx solid #F0F0F0;
			}
			.btn-box{
				display: flex;
				justify-content: center;
				.foot-btn-left{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 318upx;
					height: 88upx;
					color: #3291F8;
					font-size: 28upx;
					margin-right: 32upx;
					background: #F0F9F9;
					border: 2upx solid #3291F8;
				}
				.foot-btn-right{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 318upx;
					height: 88upx;
					color: #FFFFFF;
					font-size: 28upx;
					background: #3291F8;
					border: 2upx solid #3291F8;
				}
			}
		}
	}
</style>
